<template>
    <n-form
        label-width="auto"
        label-placement="left"
        size="small"
    >
        <n-form-item label="账号" show-require-mark>
            <n-input v-model:value="form.username"/>
        </n-form-item>
        <n-form-item label="昵称" show-require-mark>
            <n-input v-model:value="form.nickname"/>
        </n-form-item>
        <n-form-item  label="出生日期">
            <n-date-picker style="width: 100%;" type="date" v-model:formatted-value="form.birthday" clearable/>
        </n-form-item>
        <n-form-item label="电话">
            <n-input v-model:value="form.phone"/>
        </n-form-item>
        <n-form-item label="邮箱">
            <n-input v-model:value="form.email"/>
        </n-form-item>
        <n-form-item label="性别">
            <n-radio-group v-model:value="form.gender">
                <n-radio label="男" value="1"/>
                <n-radio label="女" value="0"/>
            </n-radio-group>
        </n-form-item>
        <n-form-item label="地址">
            <n-input v-model:value="form.address"/>
        </n-form-item>
        <n-form-item label="备注">
            <n-input type="textarea" v-model:value="form.remark"/>
        </n-form-item>
        <n-form-item label=" ">
            <n-button type="info" @click="handleConfirmOnClick">保存</n-button>
        </n-form-item>
    </n-form>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { postOrPutUser } from '@/api/base/user'
import { IMessage } from '@/utils/message'

const userStore = useUserStore()

let form = ref({} as BaseUser)

onMounted(() => {
    form.value = userStore.userInfo
})

async function handleConfirmOnClick(){
    const { message } = await postOrPutUser(form.value)
    userStore.InitUserInfo()
    IMessage({ content: message })
}

</script>